page {
  background-color: rgb(248, 249, 251);
}

.nav-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 9999;

  .nav-content {
    padding-left: 32rpx;
    height: 80rpx;

    .icon-wrap {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      background-color: rgba(255, 255, 255, 0.6);
    }
  }
}

.scroll-wrap {
  .details-content {
    padding: 32rpx;

    .box {
      margin-bottom: 20rpx;
      min-height: 300rpx;
      background-color: #fff;
      border-radius: 20rpx;
    }

    .info-box {
      padding: 0 10rpx;

      .box-top {
        padding: 32rpx 14rpx;
        display: flex;
        justify-content: space-between;

        .box-top-left {
          display: flex;
          align-items: center;

          .price {
            margin-right: 20rpx;
            color: #EB5A19;
            font-weight: bold;
          }

          .original-price {
            color: #ccc;
            text-decoration: line-through;
            font-size: 24rpx;
          }
        }

        .box-top-right {
          display: flex;

          .tag {
            padding: 0 4rpx;
            margin-left: 10rpx;
            font-size: 24rpx;
            color: #3AA66C;
            border: 2rpx solid #3AA66C;
            border-radius: 8rpx;

            &.red {
              border-color: #EB5A19;
              color: #EB5A19;
            }
          }
        }
      }

      .title {
        padding: 0 24rpx;
        margin-bottom: 20rpx;
        font-size: 28rpx;
        line-height: 28rpx;
        color: 333;
        font-weight: bold;
      }

      .desc {
        padding: 0 24rpx;
        font-size: 24rpx;
        line-height: 24rpx;
        color: #666;
      }

      .trait-box {
        padding: 24rpx;
        margin-top: 32rpx;
        background-color: #F5F9F8;
        border-radius: 8rpx;
        display: flex;
        justify-content: space-between;

        .trait-item {
          .value {
            margin-bottom: 6rpx;
            color: #333;
            font-size: 28rpx;
            font-weight: bold;
          }

          .label {
            color: #999;
            font-size: 24rpx;
          }
        }

        .line {
          position: relative;

          &::after {
            content: '';
            position: absolute;
            top: 10%;
            right: 0;
            display: block;
            width: 2rpx;
            height: 80%;
            background-color: #ccc;
          }
        }
      }

      .box-bottom {
        padding: 32rpx 20rpx;
        display: flex;
        justify-content: space-between;
        color: #999;
        font-size: 28rpx;
      }
    }

    .image-text-box {
      padding: 32rpx;
      font-size: 28rpx;

      .title {
        font-size: 32rpx;
        font-weight: bold;
      }

      .image-text-box-content {
        margin-top: 20rpx;
        padding: 0 20rpx;
        border: 2rpx solid #eee;

        .item {
          display: flex;

          padding: 20rpx 0;
          border-bottom: 2rpx solid #eee;

          .label {
            flex: 0 0 30%;
            color: #999;
          }

          .value {
            color: #333;
          }

          &:last-child {
            border: none;
          }
        }
      }
    }
  }

  .details-img {
    width: 100%;
  }

  .t-swiper-host {
    border-radius: 0 !important;
  }
}